<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />	
	<title>关于 于江水</title>

	<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
	<link rel="shortcut icon" href="./images/favicon.png"/>
</head>
<body class="loading-process">
<div class="loading">
	<div class="loading-circle"></div>
	<div class="loading-avatar"><img src="images/avatar@2x.jpg" alt="" width="100" height="100"></div>
	<div class="loading-info">正在努力加载中...</div>
</div>
<div class="section-header">
	<div class="section">
		<nav class="nav" role="navigation">
			<ul>
				<li class="nav-about fade fade1"><a href="#about">关于</a></li>
				<li class="nav-works fade fade4"><a href="#works">作品</a></li>
				<li class="fade back-home"><a href="#top">首页</a></li>
				<li class="nav-skill fade fade2"><a href="#skill">能力</a></li>
				<li class="nav-contact fade fade3"><a href="#contact">联系</a></li>
			</ul>
		</nav>
	</div>
	<div class="nav-bg"></div>
</div>
<div class="home-bg">
	<img src="images/home-bg.jpg" alt="" width="1000" height="667">
</div>
<div class="section-wrap section-fristpage">
	<div class="section">
		<div class="section-content">
			<p class="fade fade1">Hi，我是 于江水</p>
			<p class="fade fade2">擅长前端，喜欢简约，打算走向全端的不归路 ~</p>
			<p class="fade fade3">想了解更多，往下滚动哦 ^_^</p>
		</div>
		<a href="#" class="scroll-tip fade fade4">向下滚动</a>
	</div>
</div>
<div id="about" class="section-wrap section-about">
	<div class="section">
		<div class="about-content clearfix section-content">
			<div class="left">
				<h1>关于本人</h1>
				<p class="fade fade1">2008 年接触网站建设</p>
				<p class="fade fade2">2012 年专注前端学习</p>
				<p class="fade fade3">断续写过两年多独立博客（旧博 <a href="http://www.qianxingzhem.com" target="_blank">潜行者m</a>)</p>
				<p class="fade fade4"><a href="http://www.haohaoxuexitiantianxiangshang.com" target="_blank">好好学习天天向上</a> 开发者</p>
				<p class="fade fade5"><a href="http://deepdevelop.com" target="_blank">Deepdevelop</a> 兼职前端工程师</p>
				<p class="fade fade6">目前在申请前端实习，为 10 月份校招做准备。</p>
			</div>
			<div class="right">
				<img class="my-photo fade fade4" src="images/me.jpg" alt="" width="335" height="540">
			</div>
		</div>
	</div>
</div>
<div id="works" class="section-wrap section-works">
	<div class="section">
		<div class="works-content section-content">
			<h1>近期作品</h1>
			<div class="works-list clearfix">
				<div class="works-item first fade fade1">
					<a href="http://www.uucsr.org/" target="_blank">
						<img src="images/works/uucsr.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>UUSCR</h2>
							<p><strong>开发时间</strong>：2013年8月<br>
							<strong>工作详情</strong>：由本人负责前端页面开发，在 5 天时间内完成 30 个页面（11 个独立页面结构）的开发，以及相关交互 JS 等。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade2">
					<a href="http://hamburger-kammerspiele.de/" target="_blank">
						<img src="images/works/hk.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>Hamburger Kammerspiele</h2>
							<p><strong>开发时间</strong>：2013年11月<br>
							<strong>工作详情</strong>：负责前端页面和兼容性，响应式，增加 JS 交互和功能等。</p>
						</div>
					</a>
				</div>
				<div class="works-item fade fade3">
					<a href="http://www.haohaoxuexitiantianxiangshang.com/" target="_blank">
						<img src="images/works/hhxx.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>好好学习 天天向上</h2>
							<p><strong>开发时间</strong>：2013年6月 - 至今<br>
							<strong>工作详情</strong>：基于 WordPress 做前后端整站的开发和功能整合。</p>
						</div>
					</a>
				</div>
				<div class="works-item first fade fade4">
					<a href="http://97866.com/" target="_blank">
						<img src="images/works/game.jpg" alt="" width="300" height="180">
						<div class="work-info">
							<h2>游戏小站</h2>
							<p><strong>开发时间</strong>：2013年12月<br>
							<strong>工作详情</strong>：基于 PSD 做前端页面开发，于后端沟通交流。</p>
						</div>
					</a>
				</div>
			</div>
			<a class="more-link" href="http://yujiangshui.com/product/">查看更多</a>
		</div>
	</div>
</div>
<div id="skill" class="section-wrap section-skill">
	<div class="section">
		<div class="skill-content section-content">
			<h1>技能水平</h1>
			<ul>
				<li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C 标准的结构和代码。</li>
				<li class="fade fade3">对 可用性、可访问性、前端性能优化、最优实践 等有一定的了解和实践。</li>
				<li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li>
				<li class="fade fade4">熟练掌握 ST2 、Emmet、Sass 等等前端开发和团队协作工具。</li>
				<li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li>
				<li class="fade fade3">喜欢并使用 WordPress ，写过两年多技术博客，有一定 PHP 后端相关知识。</li>
				<li class="fade fade2">了解 Ajax 工作原理和实现方法。</li>
				<li class="fade fade1">对用户体验和交互设计有一定的了解和追求。</li>
				<li class="fade fade1">做过很多网站，了解整套网站建设的流程和相关内容（SEO、维护等）。</li>
				<li class="fade fade4">服务器使用自己搭建环境的 VPS，对 Linux 有一定了解。</li>
				<li class="fade fade2">对喜欢的事物抱有极大的兴趣和自学能力，喜欢接触新事物。</li>
			</ul>
		</div>
	</div>
</div>
<div id="contact" class="section-wrap section-contact">
	<div class="section">
		<div class="contact-content clearfix section-content">
			<h1>联系本人</h1>
			<div class="left">
				<div class="contact-ways fade fade1">
					<h2>社交网络</h2>
					<ul>
						<li>邮箱：<a target="_blank" href="mailto:yujiangshui+work@gmail.com">yujiangshui+work@gmail.com</a></li>
						<li>Q Q ：<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=2422018627&amp;site=qq&amp;menu=yes">2422018627</a></li>
						<li>知乎：<a target="_blank" href="http://www.zhihu.com/people/jiangshui">@于江水</a></li>
						<li>微博：<a target="_blank" href="http://weibo.com/yujiangshui">@yujiangshui</a></li>
						<li>Twitter：<a target="_blank" href="https://twitter.com/yujiangshui">@yujiangshui</a></li>
						<li>Github：<a target="_blank" href="https://github.com/yujiangshui">@yujiangshui</a></li>
					</ul>
				</div>
				<div class="contact-info fade fade2">
					<h2>本站声明</h2>
					<p>本站设计、交互、编码均由 Jiangshui 一人独立完成。感谢 jQuery 提供了很多方便。本站源代码已经公开在 github 上面，欢迎 fork 学习。</p>
				</div>
			</div>
			<div class="right fade fade3">
				<h2>项目外包</h2>
				<p>如果你有前端相关的需求，可以联系我做外包，目前我主要做：</p>
				<ul>
					<li>根据设计稿做出后端开发人员需要的前端页面，并与后端人员做交流。</li>
					<li>根据需求，对网站前端进行修改和优化，或者转响应式处理。</li>
					<li>做 WordPress 主题或者功能，功能等主要由 <a href="http://wpjam.com/" target="_blank">WPJAM</a> 来做，我来前端有关。</li>
					<li>对于网站建设项目，我也有一些同行朋友可以推荐，也欢迎咨询！</li>
				</ul>
				<p><strong>合作流程</strong>：按照合作谈定的价格，预付 50% 的项目款，开始工作。完成验收后，支付尾款。</p>
				<p><strong>价格参考</strong>：视具体项目难度和工作量等，一般来说，工时价格为 150 左右。</p>
			</div>
		</div>
	</div>
</div>

<div class="overlay"></div>
<div class="state-indicator"></div>

<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script src="js/global.js"></script>

</body>
</html>
